import 'package:animated_background/animated_background.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
import 'package:numbergame/src/colors.dart';
import 'package:numbergame/src/widgets.dart';

import 'CountGamePage.dart';

class HomeApp extends StatefulWidget {
  HomeApp({Key key}) : super(key: key);

  @override
  _HomeAppState createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    final double height = MediaQuery.of(context).size.height;

    return Scaffold(
      backgroundColor: Color.fromARGB(255, 232, 255, 249),
      body: AnimatedBackground(
        vsync: this,
        behaviour: RandomParticleBehaviour(
          options: ParticleOptions(
            baseColor: Color.fromARGB(255, 33, 160, 122),
            spawnMinSpeed: 10,
            spawnMaxSpeed: 25,
            spawnMinRadius: 45,
            spawnMaxRadius: 60,
            particleCount: 22,
            minOpacity: 0.05,
            maxOpacity: 0.15,
            opacityChangeRate: 2,
          ),
        ),
        child: Container(
          child: Center(
            widthFactor: 25,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  margin: EdgeInsets.only(bottom: 10),
                  child: Hero(
                    child: Material(
                      child: Text(
                        '数字排序训练',
                        style: TextStyle(
                          color: Color.fromARGB(255, 48, 157, 128),
                          fontWeight: FontWeight.w700,
                          fontSize: 28,
                        ),
                      ),
                      type: MaterialType.transparency,
                    ),
                    tag: "numberGame",
                  ),
                ),
                Text(
                  '（少儿版）',
                  style: TextStyle(
                    color: Color.fromARGB(255, 48, 157, 128),
                    fontWeight: FontWeight.w700,
                    fontSize: 20,
                  ),
                ),
                SizedBox(height: 50),
                Neumorphic(
                  style: NeumorphicStyle(
                    shape: NeumorphicShape.flat,
                    boxShape:
                        NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
                    depth: 5,
                    intensity: 0.75,
                    lightSource: LightSource.topLeft,
                    color: Color.fromARGB(255, 232, 255, 249),
                  ),
                  child: InkWell(
                    onTap: () {
                      countGameDialog(context, width: width, height: height);
                    },
                    child: Container(
                      width: 150,
                      height: 50,
                      child: Center(
                        child: Text(
                          '开始训练',
                          style: TextStyle(
                            color: Color.fromARGB(255, 48, 157, 128),
                            fontWeight: FontWeight.w700,
                            fontSize: 18,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  SnackBar snackBar(String message) => SnackBar(
        backgroundColor: MyColors.secondary,
        content: Text(message),
      );

  void countGameDialog(context,
      {double height = double.infinity, double width = double.infinity}) {
    final double dialogHeight = height / 3;
    final double dialogWidth = width / 2;

    Dialog _dialog = Dialog(
      backgroundColor: Colors.transparent,
      child: Neumorphic(
        style: NeumorphicStyle(
          shape: NeumorphicShape.flat,
          boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
          depth: -3,
          intensity: 0.75,
          lightSource: LightSource.topLeft,
          color: Color.fromARGB(255, 232, 255, 249),
        ),
        child: Container(
          padding: EdgeInsets.all(16),
          height: dialogHeight,
          width: dialogWidth,
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(15)),
          child: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    flex: 3,
                    child: SingleChildScrollView(
                      child: Text(
                        "嘿! 本项训练的规则十分简单：\n" +
                            "\n在 10秒 内找到9个数字中最小的一个，然后依次寻找更大的数字直到9个数字全部排列完成" +
                            "\n\n（注意：每次选择的数字都要比前一个数字大，并比接下来选择的数字小）",
                        style: TextStyle(
                          color: Color.fromARGB(255, 48, 157, 128),
                          fontWeight: FontWeight.w700,
                          fontSize: 13,
                        ),
                      ),
                    ),
                  ),
                  Neumorphic(
                    style: NeumorphicStyle(
                      shape: NeumorphicShape.flat,
                      boxShape: NeumorphicBoxShape.roundRect(
                          BorderRadius.circular(12)),
                      depth: 5,
                      intensity: 0.75,
                      lightSource: LightSource.topLeft,
                      color: Color.fromARGB(255, 232, 255, 249),
                    ),
                    child: InkWell(
                      onTap: () {
                        Navigator.pop(context);
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => CountGamePage()));
                      },
                      child: Container(
                        width: 150,
                        height: 50,
                        child: Center(
                          child: Text(
                            '我明白了',
                            style: TextStyle(
                              color: Color.fromARGB(255, 48, 157, 128),
                              fontWeight: FontWeight.w700,
                              fontSize: 18,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ]),
          ),
        ),
      ),
    );
    showDialog(context: context, builder: (context) => _dialog);
  }
}
